import React, { Component } from 'react'
import './photo.less'
import { Checkbox, Card, Modal, Empty } from 'antd';
import { getLocalStorage } from '../../../../utils/utils'
import { ServerURL } from '../../../../utils/config'
import { getAllFileData } from '../../../../utils/common'
import FileListNav from '../../../../components/filelistnav/filelistnav'
const CheckboxGroup = Checkbox.Group;


class Photo extends Component {
    state = {
        photoData: [],
        indeterminate: false,
        checkAll: false,
        checkedList: [],
        fileName: '',
        previewVisible: false,
        previewUrl: '',
        previewTitle: ''
    }
    componentDidMount = () => {
        let allFileData = JSON.parse(getLocalStorage('allFileData')) //取本地缓存中的所有文件数据
        if (allFileData) {
            let photoData = allFileData.data.filter((v) => /^image\/(jpeg|png|gif)$/.test(v.mimetype))
            this.setState({ photoData })
        } else {
            let { account } = JSON.parse(getLocalStorage('userInfo'))
            getAllFileData(account)
        }
    }
    setNewData = (data) => {
        let photoData = data.filter((v) => /^image\/(jpeg|png|gif)$/.test(v.mimetype))
        this.setState({
            photoData
        })
    }
    onCheckAllChange = (e) => {
        const { photoData } = this.state
        let dataList = []
        for (var i = 0; i < photoData.length; i++) {
            dataList[i] = photoData[i].id
        }
        this.setState({
            checkedList: e.target.checked ? dataList : [],
            indeterminate: false,
            checkAll: e.target.checked,
        });
    }
    onChange = (checkedList) => {
        const { photoData } = this.state
        if (checkedList.length === 1) {
            let fileName = photoData.filter(v => v.id === checkedList[0])
            fileName = fileName[0].name.substr(0, fileName[0].name.lastIndexOf('.'))
            this.setState({ fileName })
        }
        this.setState({
            checkedList: checkedList,
            indeterminate: !!checkedList.length && (checkedList.length < photoData.length),
            checkAll: checkedList.length === photoData.length,

        });
    }
    clickPreview = (url, fileName) => {
        this.setState({
            previewUrl: url,
            previewVisible: true,
            previewTitle: fileName
        });
    }

    render() {
        const { photoData, checkAll, indeterminate, fileName, checkedList, previewVisible, previewTitle, previewUrl } = this.state
        return (
            <div>
                <FileListNav selectedFileId={checkedList} setNewData={this.setNewData} accept="image/*" fileName={fileName} />
                <div className="TabTitle">
                <span>图片文件</span>
                <span>已全部加载，共{photoData.length}个文件</span>
                </div>
                {
                    photoData && photoData.length > 0 ?
                        <Card style={{ width: '100%' }} title={<Checkbox
                            indeterminate={indeterminate}
                            onChange={this.onCheckAllChange}
                            checked={checkAll}>
                            {'全选'}
                        </Checkbox>}>
                            <CheckboxGroup onChange={this.onChange} value={checkedList}>
                                <Card title=""  >
                                    {
                                        photoData.map((item) => {
                                            return (
                                                <Card.Grid className='gridStyle' key={item.id} >
                                                    <Checkbox className='CheckboxStyle' value={item.id} />
                                                    <img src={ServerURL + item.fileurl} style={{ height: 150, width: 150 }} alt={item.name} onClick={() => this.clickPreview(ServerURL + item.fileurl, item.name)} />
                                                </Card.Grid>
                                            )
                                        })
                                    }
                                </Card>

                            </CheckboxGroup>
                        </Card> : <Empty style={{marginTop:"15%"}} description="还没有图片文件，赶快去上传吧！" />
                }
                <Modal
                    visible={previewVisible}
                    title={previewTitle}
                    footer={null}
                    onCancel={() => this.setState({ previewVisible: false })}
                >
                    <img alt="example" style={{ width: '100%' }} src={previewUrl} />
                </Modal>
            </div>
        )
    }

}

export default Photo
